<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>概要统计-优惠券统计</title>
<link rel="stylesheet" type="text/css" href="css/weal.css"/>
<style type="text/css">
	.max-sel{height: 38px;width: 461px;}
	.max-sel select{border-radius: 3px;}
	.operate-btn{display: block;width: 38px;height: 38px;background: url(image/person_icon.png) center top no-repeat;background-size: 38px auto;margin-left: 15px;cursor: pointer;}
	.add-btn{display: block;width: 20px;height:20px;background-color: #1E9FFF;border-radius: 50%;margin-top: 9px;margin-left: 15px;cursor: pointer;position: relative;}
	.add-btn:before{content: '';width:2px;height: 50%;background-color: #fff;position: absolute;left: 50%;top: 25%;margin-left:-1px;}
	.add-btn:after{content: '';width: 50%;height: 2px;background-color: #fff;position: absolute;left: 25%;top: 50%;margin-top: -1px;}
	.del-btn{display: block;width: 20px;height:20px;background-color: #DD5353;border-radius: 50%;margin-top: 9px;margin-left: 15px;cursor: pointer;position: relative;}
	.del-btn:after{content: '';width: 50%;height: 2px;background-color: #fff;position: absolute;left: 25%;top: 50%;margin-top: -1px;}
</style>
</head>

<body>

<div id="wrapper" class="dm-clearfix">
	
	
	<!--新建加盟流程-->
	<div class="weal-dtlMod">
		<h4 class="title bottom-line dm-clearfix">
			<span class="txt">新建加盟流程</span>
		</h4>
		<div class="guide-info weal-data dm-clearfix dm-form" style="min-height: 670px;">
			
			<form action="" method="post">
				
				<table width="100%" cellspacing="0" cellpadding="0">
					<tr>
						<td width="100" class="tr">加盟商名称</td>
						<td class="tl">
							<div class="sel_box max-sel">
								<select name="userName" v-model="form.userName">
									<option value="0">加盟商名称1</option>
									<option value="1">加盟商名称2</option>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td class="tr">流程名称</td>
						<td class="tl">
							<div class="sel_box max-sel">
								<select name="progress" v-model="form.progress">
									<option value="0">流程名称1</option>
									<option value="1">流程名称2</option>
								</select>
							</div>
						</td>
					</tr>
					<tr v-for="(item,index) in form.nodes">
						<td class="tr">节点名称</td>
						<td class="tl dm-clearfix">
							<input type="text" class="max-ipt dm-left" placeholder="请输入节点名称" v-model="item.name" />
							<a class="operate-btn dm-left" @click="setOperate(index)"></a>
							<a class="add-btn dm-left" @click="addNode" v-if="index == 0"></a>
							<a class="del-btn dm-left" @click="delNode(index)" v-if="index != 0"></a>
						</td>
					</tr>
					
					<tr>
						<td class="tr"></td>
						<td class="tl btn-box dm-clearfix">
							<input type="button" class="submit dm-left" value="提交" />
							<input type="button" class="close dm-left" value="关闭" />
						</td>
					</tr>
				</table>
				
			</form>
			
		</div>
	</div>
	
	<!--设置操作人弹窗-->
	<div id="addTaskMask" v-show="show">
		<div class="mask"></div>
		<div class="addTask">
			<div class="head dm-clearfix">
				<h4 class="bt dm-left">操作人</h4>
				<a class="close-btn" @click="closeMask">×</a>
			</div>
			<div class="dm-form">
				<form action="" method="" id="taskForm">
					<table width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td class="tl">节点名称</td>
							<td class="tl">
								<input type="text" class="max-ipt taskName" v-model.lazy="curNode.name"  placeholder="请输入节点名称" />
							</td>
						</tr>
						<tr>
							<td class="tl">配置类型</td>
							<td class="tl">
								<div class="sel_box max-sel">
									<select name="userName" v-model.lazy="curNode.type">
										<option value="">请选择</option>
										<option value="0">配置类型1</option>
										<option value="1">配置类型2</option>
									</select>
								</div>
							</td>
						</tr>
						<tr>
							<td class="tl">操作角色</td>
							<td class="tl">
								<div class="sel_box max-sel">
									<select name="userName" v-model.lazy="curNode.role">
										<option value="">请选择</option>
										<option value="0" >操作角色1</option>
										<option value="1">操作角色2</option>
									</select>
								</div>
							</td>
						</tr>
						<tr>
							<td class="tl">操作人</td>
							<td class="tl">
								<div class="sel_box max-sel">
									<select name="userName" v-model.lazy="curNode.person">
										<option value="">请选择</option>
										<option value="0" >操作人1</option>
										<option value="1">操作人2</option>
									</select>
								</div>
							</td>
						</tr>
						<tr>
							<td class="tl"></td>
							<td class="tl btn-box dm-clearfix">
								<input type="button" class="submit dm-left" @click="enterMask" value="确定" />
							</td>
						</tr>
					</table>
				</form>
			</div>
		</div>
	</div>
	
</div>

<script src="js/lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

var vm = new Vue({
	el:'#wrapper',
	data:{
		form:{
			userName:'0',
			progress:'0',
			nodes:[
				{name:'',type:'',role:'',person:''}
			]
		},
		curNode:'',
		show:false
	},
	methods:{
		//设置操作人
		setOperate:function(index){
			this.curNode = this.form.nodes[index];
			this.show = true;
		},
		//新增节点
		addNode:function(){
			var obj = {name:'',type:'',role:'',person:''};
			this.form.nodes.push(obj);
		},
		//删除节点
		delNode:function(index){
			this.form.nodes.splice(index,1);
		},
		//关闭弹窗
		closeMask:function(){
			this.show = false;
		},
		//确定
		enterMask:function(){
			this.show = false;
		}
	},
	mounted:function(){
		
	},
});

</script>

</body>
</html>
